<template>
    <div>
          <comment-header>猫舍</comment-header>
        <div class="box" v-for="(item,index) in contentList" :key="index">
          <div class="smallbox">
                <div class="box_left">
                    <h3 v-text="item.name"></h3>
                    <span>{{item.district}} {{item.formatted_address}}</span><br>
                    <span>周边: {{item.surround}}</span>
            </div>
            <div class="box_right">
                <img :src="item.picture" alt="">
            </div>
          </div>
        </div>
    </div>
</template>
<script>
import commentHeader from "../../components/comment/commentHeader"

export default {
     components:{
    commentHeader     
  },
    data(){
        return{
            contentList:[],
              page:1,
               loadingMore: false
        }   
    },
    mounted(){
        this.HairdrContent();
          window.onscroll = this.didscroll;
    },
    methods:{
        HairdrContent:function(){
            var that = this
            this.$http.get("/pet/v2/servicelist?page="+this.page+"&tag_id=40").then(function(data){
                that.contentList = data.body.data.list
                console.log(data)
            })
        },
          didscroll(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        var contentHeight = document.body.clientHeight
        var windowHeight = window.innerHeight
        if(scrollTop + windowHeight > contentHeight -60){
            if(this.loadingMore == false && this.page <2){
                this.loadMore();
             
            }
        }
    },
    loadMore(){
        this.loadingMore = true
        this.page += 1
        var that = this
        var url = "/pet/v2/servicelist?page="+this.page+"&tag_id=40"
        this.$http.get(url).then(function(data){
            that.contentList = that.contentList.concat(data.body.data.list)
            that.loadingMore = false
        })
    },
    

    }
   
}
</script>
<style scoped>
.box{
    background: white;
}

.smallbox{
    width: 90vw;
    margin: 0 auto;   
    border-bottom:1px solid #f1f1f1; 
    display: flex;
    justify-content: space-between;
    text-align: left;
    padding-top: 3vw;
    /* padding-bottom: 5vw; */
}
    .box_right{
        width:27vw;
        height: 27vw;
       
    }
    .box_left{
    width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
    .box_right>img{
        width: 100%;
    }
    h3{
        font-size: 4.2vw;
        margin: 0 0 5vw 0;
        color: black;
    }
    span{
        font-size: 2.5vw;
        color: #a3a3a3;
    }
</style>
